<template>
  <div class="value-selector">
    <FormOptionSelect
      v-if="isOptionType && isSelectMethod"
      v-model="modelValue"
      :enable-remove-html-tag="false"
      :item="item"
      :multiple="isMultipleSelect"
      :placeholder="$t('form.dataFilter.selectOption')"
      allow-create
      clearable
      default-first-option
      filterable
      size="default"
      @change="handleChange"
    />
    <el-select
      v-else-if="isDateType && isTimeRange"
      v-model="modelValue"
      :placeholder="$t('form.dataFilter.rangePlaceholder')"
      collapse-tags
      filterable
      size="default"
      @change="handleChange"
    >
      <el-option
        v-for="tr in timeRanges"
        :key="tr.value"
        :label="tr.label"
        :value="tr.value"
      />
    </el-select>
    <el-date-picker
      v-else-if="isDateType"
      v-model="modelValue"
      :disabled="isNullMethod"
      :format="dateFormat"
      :placeholder="$t('form.dataFilter.datePlaceholder')"
      :type="dateType"
      :value-format="dateValueFormat"
      @change="handleChange"
    />
    <user-select
      v-else-if="isUserType"
      v-model="modelValue"
      @change="handleChange"
    />
    <el-select
      v-else-if="isWorkflowStatus"
      v-model="modelValue"
      :placeholder="$t('form.dataFilter.userPlaceholder')"
      collapse-tags
      filterable
      multiple
      size="default"
      @change="handleChange"
    >
      <el-option
        v-for="status in flowStatusList"
        :key="status.value"
        :label="status.label"
        :value="status.value"
      />
    </el-select>
    <el-input
      v-else
      v-model="modelValue"
      :disabled="isNullMethod"
      :placeholder="$t('form.dataFilter.enterCondition')"
      size="default"
      @change="handleChange"
    />
  </div>
</template>

<script setup>
import { computed, watch } from "vue";

const props = defineProps({
  // 字段类型
  fieldType: {
    type: String,
    default: ""
  },
  // 过滤方法
  method: {
    type: String,
    default: ""
  },
  // 字段配置
  fieldScheme: {
    type: Object,
    default: () => ({})
  },
  // 表单项
  item: {
    type: Object,
    default: () => ({})
  },
  // 时间范围选项
  timeRanges: {
    type: Array,
    default: () => []
  },
  // 工作流状态列表
  flowStatusList: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: [String, Number, Array, Object],
    default: ""
  }
});

const emit = defineEmits(["update:modelValue", "change"]);

// 计算属性
const isOptionType = computed(() => ["SELECT", "CHECKBOX", "RADIO"].includes(props.fieldType));
const isDateType = computed(() => ["DATE"].includes(props.fieldType));
const isUserType = computed(() => ["USER"].includes(props.fieldType));
const isWorkflowStatus = computed(() => props.item.formItemId === "workflowStatus");
const isSelectMethod = computed(() => ["INCLUDE", "NOT_INCLUDE", "EQ", "NE"].includes(props.method));
const isTimeRange = computed(() => props.method === "TIME_RANGE");
const isNullMethod = computed(() => ["IS_NULL", "NOT_NULL"].includes(props.method));
const isMultipleSelect = computed(
  () => ["INCLUDE", "NOT_INCLUDE"].includes(props.method) || ["CHECKBOX"].includes(props.fieldType)
);

// 日期相关配置
const defaultDateTimeFormat = "YYYY-MM-DD HH:mm:ss";
const dateFormat = computed(() => props.fieldScheme?.format || defaultDateTimeFormat);
const dateType = computed(() => props.fieldScheme?.type || "datetime");
const dateValueFormat = computed(() => props.fieldScheme?.["value-format"] || defaultDateTimeFormat);

// 值变化处理
const handleChange = value => {
  emit("update:modelValue", value);
  emit("change", value);
};

// 监听值变化
watch(
  () => props.modelValue,
  newVal => {
    if (newVal !== undefined) {
      handleChange(newVal);
    }
  }
);
</script>

<style lang="scss" scoped>
.value-selector {
  width: 100%;

  :deep(.el-select),
  :deep(.el-date-picker),
  :deep(.el-input) {
    width: 100%;
  }
}
</style>
